<template>
  <view class="points-page">
    <!-- 主要内容 -->
    <scroll-view scroll-y class="container" :style="{height: scrollHeight + 'px'}">
      <!-- 积分概览 -->
      <view class="points-overview">
        <view class="points-card">
          <view class="title">当前积分</view>
          <view class="amount">{{pointsBalance}}</view>
          <view class="tips">积分有效期至：{{expiryDate}}</view>
        </view>
        
        <view class="points-actions">
          <view class="action-item" @click="showPointsRule">
            <u-icon name="question-circle" size="24" color="#ff2d51"></u-icon>
            <text>积分规则</text>
          </view>
          <view class="action-item" @click="goExchange">
            <u-icon name="shopping-cart" size="24" color="#ff2d51"></u-icon>
            <text>积分兑换</text>
          </view>
        </view>
      </view>
      
      <!-- 积分记录 -->
      <view class="section">
        <view class="section-header">
          <text class="title">积分记录</text>
          <u-tabs 
            :list="recordTabs" 
            :current="currentTab" 
            @change="recordTabChange"
            :activeStyle="{color: '#ff2d51', fontWeight: 'bold'}"
            :inactiveStyle="{color: '#666'}"
            lineColor="#ff2d51"
            :scrollable="true"
          ></u-tabs>
        </view>
        
        <view class="record-list">
          <view 
            v-for="(item, index) in List" 
            :key="index" 
            class="record-item"
          >
            <view class="record-left">
              <u-icon 
                :name="item.type === 'earn' ? 'plus-circle' : 'minus-circle'" 
                :color="item.type === 'earn' ? '#19be6b' : '#ff2d51'"
                size="20"
              ></u-icon>
              <view class="record-info">
                <view class="record-title">{{item.title}}</view>
                <view class="record-time">{{item.time}}</view>
              </view>
            </view>
            <view 
              class="record-points" 
              :style="{color: item.type === 'earn' ? '#19be6b' : '#ff2d51'}"
            >
              {{item.type === 'earn' ? '+' : '-'}}{{item.points}}
            </view>
          </view>
          
          <u-empty
            v-if="List.length === 0"
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            text="暂无积分记录"
          ></u-empty>
        </view>
      </view>
    </scroll-view>
    
    <!-- 积分规则弹窗 -->
    <u-popup :show="showRulePopup" mode="center" round="16" width="80%"  @close="showRulePopup=false">
      <view class="rule-popup">
        <view class="popup-title">积分规则</view>
        <scroll-view scroll-y class="rule-content">
          <view class="rule-item">
            <view class="rule-title">1. 如何获取积分？</view>
            <view class="rule-desc">
              <text>· 购物奖励：每消费1元可获得1积分</text>
              <text>· 评价商品：评价订单可获得20积分/单</text>
              <text>· 活动奖励：参与平台活动可获得额外积分</text>
            </view>
          </view>
          
          <view class="rule-item">
            <view class="rule-title">2. 积分如何使用？</view>
            <view class="rule-desc">
              <text>· 100积分可抵扣1元现金</text>
              <text>· 可在积分商城兑换商品</text>
              <text>· 可参与积分抽奖活动</text>
            </view>
          </view>
          
          <view class="rule-item">
            <view class="rule-title">3. 积分有效期</view>
            <view class="rule-desc">
              <text>· 积分有效期为1年，到期自动清零</text>
              <text>· 不同渠道获取的积分有效期独立计算</text>
            </view>
          </view>
        </scroll-view>
        
        <u-button 
          type="primary" 
          shape="circle" 
          text="我知道了" 
          customStyle="margin-top: 30rpx"
          @click="showRulePopup = false"
        ></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
export default {
  data() {
    return {
	  loading: false,
      scrollHeight: 0,
      pointsBalance: 1250,
      expiryDate: '2024-06-30',
      currentTab: 0,
	  loadStatus: 'loadmore',
	  refreshing: false,
	  page: 1,
	  pageSize: 10,
	  hasMore: true,
      recordTabs: [
        {name: '全部'},
        {name: '获取'},
        {name: '使用'}
      ],
      showRulePopup: false,
      List: []
    }
  },
  onLoad() {
    this.calcScrollHeight();
    this.loadPointsData();
  },
  methods: {
    calcScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollHeight = systemInfo.windowHeight;  
    },
    
    // 加载积分数据
    async loadPointsData() {
	  if (this.loading || !this.hasMore) return;
	  try {
	  	this.loading = true;
	  	this.loadStatus = 'loading';
	  	let param = {
	  		usrid: uni.getStorageSync('usrid'),
	  		type: this.currentTab,
	  		page: this.page,
	  		pageSize: this.pageSize
	  	}
	  	uni.showLoading({
	  		title: '加载中...'
	  	});
	  	const res = await httpsend('getpointList', JSON.stringify(param));
	  	if (res?.code === 1) {
	  		if (this.page == 1) {
	  			this.List = res.data;
	  		} else {
	  			this.List = [...this.List, ...res.data];
	  		}
	  		this.pointsBalance = res.pointsBalance;
	  		this.expiryDate = res.expiryDate;
			if(this.currentTab!==0){
				this.List = this.List.filter(item => item.status == this.currentTab);
			}
			console.log('List',this.List);
	  	} else {
	  		this.$api.msg(res.msg);
	  	}
	  	this.loading = false;
	  	uni.hideLoading();
	  	this.page++;
	  	// 模拟分页结束
	  	if (this.page >= 3) {
	  		this.hasMore = false;
	  		this.loadStatus = 'nomore';
	  	} else {
	  		this.loadStatus = 'loadmore';
	  	}
	  } catch (err) {
	  	this.loading = false;
	  	uni.hideLoading();
	  	console.log('err', err);
	  }
    },
    
    // 切换记录类型
    recordTabChange(item) {
      this.currentTab = item.index;
	  this.List=[];
	  this.page = 1;
      this.loadPointsData();
    },
    
    // 显示积分规则
    showPointsRule() {
      this.showRulePopup = true;
    },
    
    // 跳转积分兑换
    goExchange() {
      uni.navigateTo({
      	url: `/pages/goodsinfo/goodslist`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.points-page {
  height: 100vh;
  background-color: #f7f7f7;
}

.container {
  padding: 20rpx;
}

.points-overview {
  margin-bottom: 20rpx;
}

.points-card {
  background: linear-gradient(135deg, #ff2d51, #ff6b81);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  color: #fff;
  text-align: center;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  
  .amount {
    font-size: 72rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .tips {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

.points-actions {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 0;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  
  .section-header {
    .title {
      display: block;
      font-size: 28rpx;
      font-weight: bold;
      padding: 30rpx 0 20rpx;
    }
  }
}

.record-list {
  padding: 20rpx 0;
  
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-left {
      display: flex;
      align-items: center;
    }
    
    .record-info {
      margin-left: 20rpx;
      
      .record-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
      }
      
      .record-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .record-points {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.rule-popup {
  padding: 40rpx;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .rule-content {
    max-height: 60vh;
    
    .rule-item {
      margin-bottom: 30rpx;
      
      .rule-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #ff2d51;
        margin-bottom: 15rpx;
      }
      
      .rule-desc {
        display: flex;
        flex-direction: column;
        
        text {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
          line-height: 1.6;
        }
      }
    }
  }
}

/* uView 组件样式覆盖 */
:deep(.u-tabs__wrapper__nav__item) {
  flex: none;
  padding: 0 30rpx;
}
</style>